<style lang='stylus'>
page {
  height: 100%;
}
.header {
  width: 100%;
}
.scroller {
  width: 100%;
  overflow: hidden;
}
.btn-card{
  display :inline-block;
  height:60rpx;
  background-color : #ed3f14;
  font-size :36rpx;
  line-height :60rpx;
  color:#fff;
}
.card-bg {
  background: linear-gradient(90deg,#3e87f0, #3e78f5, #3e87f0);
  border 4rpx solid #dcdcdc
}
.card-bg-over{
 background: linear-gradient(135deg, #1e1e1e,#b2b2b2,#ccc)
}
</style>
<template>
  <view class="content ft28 flex flex-column bgw">
    <view class="scroller flex1">
      <scroll-view
        class="scroll-view"
        scroll-y
        :style="{height: scrollerObj.height + 'px'}"
        @scrolltolower='scrolltolower'
        :lower-threshold='scrollerObj.lowerThreshold'
      >
      <!-- <i-button  type="primary" shape="circle" size="small"  @tap="toPlanList">购买新的月卡</i-button> -->

         <!-- <view class="cell flex  mgb12 flex-between " >
               <i-button bind:click="handleClick" type="primary" shape="circle" size="small" @click="toPlanList()">我的钱包</i-button>
                <i-button bind:click="handleClick" type="primary" shape="circle" size="small" @click="toPlanList()">购买新的月卡</i-button>
              </view> -->
        <view :class="cardList.isPast==1?'pd20 mg30-x mgt30  radius-16 bgw border-border card-bg ftw':'pd20 mg30-x mgt30  radius-16 bgw border-border card-bg-over ftw' "
          v-for="cardList in list"  :key="cardList.cardId">
         <view class="cell flex flex-between mgb12 " >
                <text class="ftw">卡号:</text>
                <text>{{cardList.cardNo}}</text>
              </view>
            <view class="item-header flex flex-between bcardList-bottom">
              <text class="ftw">月卡类型:</text>
              <text class="ftw">{{ cardList.cardType === 1 ? '城市卡' : cardList.cardType === 2 ? '设备卡':'' }}</text>
              
             
            </view>
            <view class="item-body pdt20">
              <view class="cell flex flex-between mgb12"
                >
                <text class="ftw">月卡状态:</text>
                <text  :class="[cardList.isUse === 1 ? 'dlc-success': cardList.isUse==2 && cardList.isPast==2? 'dlc-warning ':'dlc-success']">
                {{ cardList.isUse === 1 ? '未使用' : cardList.isUse==2 && cardList.isPast==2? '已过期': '使用中' }}</text>
              </view>

              <view class="cell flex flex-between mgb12"
                v-if="cardList.cardType==2">
                <text class="ftw">可使用充电桩编号:</text>
                <text>{{cardList.equipmentNumber}}</text>
              </view>
              <view class="cell flex flex-between mgb12"
                v-if="cardList.cardType==2">
                <text class="ftw flex1">充电桩所在地:</text>
                <text class="flex2">{{cardList.address }}</text>
              </view>
              <view class="cell flex flex-between mgb12"
                v-if="cardList.cardType==1">
                <text class="ftw">适用地区:</text>
                <text>{{cardList.province+cardList.city }}</text>
              </view>          

              <view class="cell flex flex-between mgb12" >
                <text class="ftw">剩余时长:</text>
                <text>{{ Math.floor((cardList.useTimeQuantum)/1000/3600)}}小时</text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="ftw">有效期:</text>
                <text>{{cardList.startTime.slice(0,10).replace(/-/g,'.')}}-{{cardList.endTime.slice(0,10).replace(/-/g,'.')}}
                </text>
              </view>
              <view class="cell flex  mgb12 flex-align-end " 
               v-if="cardList.isPast===2">
               <button class="btn-card dlc-danger radius-16 " @click="delUserCard(cardList.cardId)">删除月卡</button>
              </view>
            </view>
        </view>
        <i-load-more
          v-if="scrollerObj.loading || scrollerObj.isEnd"
          :tip="loadingTip"
          :loading="scrollerObj.loading"
        />
      </scroll-view>
    </view>
     <i-modal
      title="确认删除该月卡"
      :visible="tipVidible"
      @ok="delTipVidible(id)"
      @cancel="tipVidible = false"
    >

    </i-modal>
    <i-message id="message" />
  </view>
</template>

<script>
import { userCardList,userCardDel } from '@/api';
import { parseTime } from '@/utils';
import LoadMore from '@/mixins/LoadMore';
import store from '@/store'
const { $Message } = require('@/wxcomponents/iview/base/index');
export default {
  mixins: [LoadMore],
  data () {
    return {
      info:{
        offset:1,
        limit:"20",
        type:"1",
        },
        pages:1,
      list:[],
       "total": 2,
        "size": 10,
        "current": 1,
        "searchCount": true,
        "pages": 1,
        tipVidible:false,
        delLoading:false

    }
  },
  methods: {
    async fetchData () {
     //调用服务器接口
      const { data } = await userCardList({...this.info})     
      console.log(data)
      if (data.code === 1) {
         this.pages=data.data.pages
        let { records, total } = data.data
        records = records.map(i => {
          return {
            ...i,
            useTimeQuantum:i.useTimeQuantum<0?"0":i.useTimeQuantum,
          }
        })
        this.list = this.list.concat(records)
         if(this.pages>this.offset){
           this.offset=this.offset+1
        }
        let len = this.list.length
        if (len >= total) {
          this.scrollerObj.isEnd = true
        }
      }
    },
    async delTipVidible(id){
       //调用服务器接口
     const {data} =await userCardDel({cardId:id})

   
    },
     delUserCard(id){
      this.tipVidible=true
      this.delTipVidible(id)
       
  
    },
    // 跳转购买月卡套餐
    toPlanList(){
     uni.navigateTo({
　　  url:'/pagesA/userCard/planList'
     });
    }

  },
  onLoad(query) {
    // this.fetchData ()
    // let {type} = {...query}
    // if(type){
    //   this.type = 2
    //   uni.setNavigationBarTitle({
    //     title:'取衣订单'
    //   });
    // }
  }
}
</script>

